<template>
  <div class="rt-container">
    <div class="rt-table">
      <table cellspacing="0" cellpadding="0" border="0" v-if="dataValue" :class="['el-table el-table--border',table.align == 'left' ? 'leftAlign' : (table.align == 'right' ? 'rightAlign' : 'centerAlign')]">
        <tbody>
          <tr>
            <td width="100" class="el-table__cell"/>
            <td v-for="(col,index) in table.columns" :key="index" class="el-table__cell">
              {{ col.label }}
            </td>
          </tr>
          <tr v-for="(row,rIndex) in table.rows" :key="rIndex">
            <td class="el-table__cell">
              {{ row.label }}
            </td>
            <td class="el-table__cell" v-for="(col,cIndex) in table.columns" :key="cIndex" :width="col.columnsWidth">
              <el-input  v-model="dataValue[row.id][col.id]" 
              @input.native="handleChange($event,rIndex,cIndex)" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'

export default {
  name: 'MatrixInput',
  mixins: [mixin],
  props: {
    table: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      dataValue: {},
    }
  },
  watch: {
    table: {
      handler(value) {
        this.initValue()
      },
      deep: true
    }
  },
  created() {
    this.initValue()
  },
  methods: {
    // 初始化矩阵value为二维数组
    initValue() {
      let initValue = {}
      this.table.rows.forEach(row => {
        initValue[row.id]={}
        this.table.columns.forEach(col => {
          if (this.value[row.id]&&this.value[row.id][col.id]) {
            initValue[row.id][col.id] = this.value[row.id][col.id]
          } else {
            initValue[row.id][col.id] = null
          }
        })
        
      })
      this.dataValue = initValue
      console.log(this.dataValue ,'this.dataValue 5555')
    },
    handleChange() {
      this.$emit('input', this.dataValue)
      this.value=this.dataValue
      console.log(this.dataValue,'aaaa')
    }
  }
}
</script>

<style lang="scss" scoped>
.rt-container {
  padding: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;

  .rt-table {
    width: 750px;
  }

  th, td {
    vertical-align: middle !important;
  }
.leftAlign th, .leftAlign td {
    text-align: left;
}
.rightAlign th, .rightAlign td {
    text-align: right;
}
.centerAlign th, .centerAlign td {
    text-align: center;
}
  .el-input {
    width: 70% !important;
  }
}


</style>
